<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
import { debounce } from '@/utils';

const animationDuration = 6000;

export default {
  props: {
    className: {
      type: String,
      default: 'chart',
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '500px',
    },
    options: {
      type: Object,
      default: function () {
        return {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          grid: {
            top: 10,
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
              axisTick: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: 'pageA',
              type: 'bar',
              stack: 'vistors',
              barWidth: '60%',
              data: [400, 52, 200, 334, 390, 330, 220],
              animationDuration,
            },
            {
              name: 'pageB',
              type: 'bar',
              stack: 'vistors',
              barWidth: '60%',
              data: [80, 52, 200, 334, 390, 330, 220],
              animationDuration,
            },
            {
              name: 'pageC',
              type: 'bar',
              stack: 'vistors',
              barWidth: '60%',
              data: [30, 52, 200, 334, 390, 330, 220],
              animationDuration,
            },
          ],
        };
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    options: {
      handler: function (val) {
        if (JSON.stringify(val) != '{}') {          
          this.initChart();
        }
      },
      deep:true,      
    },
  },
  mounted() {
    this.initChart();    
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize();
      }
    }, 100);
    this.initChart();
    window.addEventListener('resize', this.__resizeHandler);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    window.removeEventListener('resize', this.__resizeHandler);
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons');

      this.chart.setOption(this.options);
    },
  },
};
</script>
